<style>

    .body-left {
        width: 14%;
        position: absolute;
        text-align: center;
    }

    .body-left .meetingAbstract {
        width: 100%;
        margin: 0px;
        resize: none;
        height: 200px;
    }

    .body-center {
        width: 100%;
        display: inline-block;
    }

    .body-center .meetingTitle {
        text-align: center;
        font-weight: bold;
        color: #000;
    }

    .body-center .content {
        width: 70%;
        height: 300px;
        overflow-y: auto;
        margin: 10px auto;
        border: 2px solid #333;
    }

    .body-center .nameList {
        text-indent: 15%;
        margin-bottom: 10px;
    }

    .body-center .nameList span {
        margin: 0 5px;
    }

    .body-center .nameList:first-child {
        margin: 0;
    }

    .body-center .content div {
        padding: 5px;
        font-size: 16px;
    }

    .body-center .content div span {
        margin-right: 5px;
    }

    .body-center .content div span:nth-child(1) {
        font-family: 仿宋;
    }

    .body-center .content div span:nth-child(3) {
        font-size: 12px;
        color: rebeccapurple;
    }

    .body-center .content div:nth-child(3n+0) span {
        color: green
    }

    .body-center .content div:nth-child(3n+1) span {
        color: darkmagenta
    }

    .body-center .content div:nth-child(3n+2) span {
        color: lightcoral
    }

    .body-right {
        width: 14%;
        position: absolute;
        right: 0;
        top: 0;
    }

    .body-right > p {
        margin: 0px;
        padding: 5px;
        text-align: left;
        background: #41C7DB;
        border: 1px solid #eee;
        color: #fff;
    }

    .body-right .imgList {
        text-align: left;
        height: 235px;
        border: 1px solid #eee;
        overflow-y: auto;
    }

    .body-right .imgList img {
        width: 50%;
    }
</style>
<form class="form-horizontal" role="form" id="fileRecorderForm" style="position:relative;">
    <div class="body-left">
        <p style="color:#fff;margin: 0px;padding: 5px;text-align: left;background: #41C7DB;border: 1px solid #eee;">
            会议摘要</p>
        <textarea rows="10" class="meetingAbstract"></textarea>
        <p style="cursor: pointer;background: #666666;color: #fff;height: 25px;line-height: 25px;">更新会议摘要</p>
    </div>
    <div class="body-center">
        <h1 class="meetingTitle"></h1>
        <div class="content"></div>
        <div class="nameList">
            <span>会议参与人:</span>
        </div>
        <div class="mail-attachment" style="word-break:break-all;">
            <p>
                <span><i class="fa fa-paperclip"></i> <span class="num">0 </span> 个附件 - </span>
                <a href="${basePath}/function/downloadZipFile?meetingId=${meetingId}">下载全部</a> |
                <a href="${basePath}/function/downloadMeetingFile?meetingId=${meetingId}">下载会议文档</a> |
                <a href="javascript:void(0);" onclick="uploadMeetingMaterals('url')">上传会议材料</a> |
                <a href="javascript:void(0);" onclick="uploadMeetingMaterals('var1')">上传备用文档</a>
            </p>
            <div class="attachment">

            </div>
        </div>
    </div>
    <div class="body-right">
        <p>会议参与人头像</p>
        <div class="imgList"></div>
    </div>
</form>



<script type="text/javascript">

    function getFileBox(url, filename) {
        var fileBox = $("<div class='file-box'></div>");
        var file = $("<div class='file'></div>");
        var a = $("<a></a>");
        a.attr("href", "${basePath}/function/downloadFile?filePath=" + url);
        var corner = $('<span class="corner"></span>');
        var icon = $('<div class="icon"></div>');
        icon.html('<i class="fa fa-file"></i>');
        var fileName = $('<div class="file-name"></div>');
        fileName.text(filename);
        a.append(corner).append(icon).append(fileName);
        file.append(a);
        fileBox.append(file);
        return fileBox;
    }

    function getAllFileBox() {
        AsyncGet("${basePath}/function/getAllFileByMeetingId", {meetingId:${meetingId}}, function (value) {
            $(".attachment").empty();
            $(".mail-attachment .num").text(value.length);
            for (var i = 0; i < value.length; i++) {
                var fileBox = getFileBox(value[i].url, value[i].fileName);
                $(".attachment").append(fileBox);
            }
        });
    }

    getAllFileBox();

    function uploadMeetingMaterals(location) {
        var acceptMime = ".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document";
        var file = $("<input type='file'>");
        file.attr("accept", acceptMime)
        file.click();
        file.change(function () {
            var formData = new FormData();
            formData.append("file", this.files[0]);
            formData.append("location", location);
            formData.append("meetingId", ${meetingId});
            $.ajax({
                url: "${basePath}/function/uploadMeetingMaterals",
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (value) {
                    if (value.code == 0) {
                        getAllFileBox();
                    } else {
                        ErrMessage(value.msg);
                    }
                    file.remove();
                }
            });
        })

    }

    AsyncGet("${basePath}/function/getMeetingById", {id:${meetingId}}, function (value) {
        $(".meetingAbstract").val("  " + value.meetingAbstract);
        $(".meetingTitle").text(value.title);
    })
    AsyncGet("${basePath}/function/getParticipateByMeetingId", {meetingId:${meetingId}}, function (value) {
        for (var i = 0; i < value.length; i++) {
            var participants = value[i];
            var span = $("<span>" + participants.username + "</span>");
            $(".nameList").append(span);
            var img = $("<img class='img-rounded'>");
            img.attr("src", "${basePath}/function/getAvatar?avatar=" + participants.avatar).attr("title", participants.username);
            $(".imgList").append(img);
        }
    })
    AsyncGet("${basePath}/function/getMeetingTextByMeetingId", {meetingId:${meetingId}}, function (value) {
        for (var i = 0; i < value.length; i++) {
            var meetingText = value[i];
            var div = $("<div></div>");
            var username = $("<span></span>");
            username.text(meetingText.participantsName + ":");
            var content = $("<span></span>");
            content.text(meetingText.text);
            var time = $("<span></span>");
            time.text(meetingText.startTime);
            div.append(username).append(content).append(time);
            $(".content").append(div);
        }
    })

    $(".meetingAbstract").next().click(function () {
        AsyncPost("${basePath}/function/updateMeetingAbstractById", {
            id:${meetingId},
            meetingAbstract: $(".meetingAbstract").val()
        }, function (value) {
            if (value.code == 0) {
                ShowMessage(value.msg);
            } else {
                ErrMessage(value.msg);
            }
        })
    })

</script>

</body>
</html>